<template>
  <v-row align="center">
    <v-col
      class="text-center"
      cols="12"
      sm="4"
    >
      <div class="my-2">
        <v-btn
          depressed
          small
        >
          Normal
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          small
          color="primary"
        >
          Primary
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          small
          color="error"
        >
          Error
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          small
          disabled
        >
          Disabled
        </v-btn>
      </div>
    </v-col>

    <v-col
      class="text-center"
      cols="12"
      sm="4"
    >
      <div class="my-2">
        <v-btn depressed>
          Normal
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          color="primary"
        >
          Primary
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          color="error"
        >
          Error
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          disabled
        >
          Disabled
        </v-btn>
      </div>
    </v-col>

    <v-col
      class="text-center"
      cols="12"
      sm="4"
    >
      <div class="my-2">
        <v-btn
          depressed
          large
        >
          Normal
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          large
          color="primary"
        >
          Primary
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          large
          color="error"
        >
          Error
        </v-btn>
      </div>
      <div class="my-2">
        <v-btn
          depressed
          large
          disabled
        >
          Disabled
        </v-btn>
      </div>
    </v-col>
  </v-row>
</template>
